<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 该设置用于适应多种设备（如pc、平板和手机等）设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css">
    <title>宜染在线</title>


    <style type="text/css">

    </style>


</head>

<body>

    <div class="container-fluid" id="app" style="padding:0 2px;">

        <nav>
            <ol class="breadcrumb" style="padding:5px 5px;font-size:14px;margin-bottom:5px;">
                <li class="breadcrumb-item">基础信息</li>
                <li class="breadcrumb-item active">客户信息维护</li>
            </ol>
        </nav>




        <form class="form-inline my-2">
            <div class="input-group mr-1 input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">编号</span>
                </div>
                <input type="text" class="form-control" v-model="query.cus_id">
            </div>
            <div class="input-group mr-1 input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">名称</span>
                </div>
                <input type="text" class="form-control" v-model="query.cus_name">
            </div>
            <div class="input-group mr-1 input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">备注</span>
                </div>
                <input type="text" class="form-control" v-model="query.cus_remark">
            </div>
            <div class="input-group mr-1 input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">状态</span>
                </div>
                <select @change="getPage(1)" class="custom-select" v-model="query.cus_status">
                    <option value="-1">全部</option>
                    <option v-for="status in statusList" :value="status.code">{{status.name}}</option>
                </select>
            </div>

            <div class="input-group mr-1 input-group-sm">

                <button @click="getPage(1)" type="button" class="btn btn-primary btn-sm" style="width:100px;"><i
                        class="fa fa-search"></i> 查询</button>

            </div>
        </form>

        <div class="btn-group btn-group-sm mb-2 ">
            <button @click="openAddWin" type="button" class="btn btn-primary">新增</button>
            <button @click="execMultiDel" type="button" class="btn btn-danger">删除</button>
        </div>

        <table class="table table-sm table-hover border-bottom mb-1">
            <thead class="thead-light">
                <tr>
                    <th><input type="checkbox" /></th>
                    <th>客户编号</th>
                    <th>客户名称</th>
                    <th>客户备注</th>
                    <th>客户状态</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in page.rows">
                    <td><input type="checkbox" :value="item.cus_id" v-model="ids" /></td>
                    <td>{{item.cus_id}}</td>
                    <td>{{item.cus_name}}</td>
                    <td>{{item.cus_remark}}</td>
                    <td>{{item.cus_status}}</td>
                    <td>
                        <a class="btn btn-primary btn-sm" @click.prevent="openUpdWin(item)" href="#">修改</a>
                        <a class="btn btn-danger btn-sm" @click.prevent="execDel(item.cus_id)" href="#">删除</a>
                    </td>
                </tr>

            </tbody>

        </table>



        <nav style="display:flex;flex-direction: row;justify-content:space-between;">
            <ul class="pagination mb-0">
                <li>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text">每页</span>
                        </div>
                        <select @change="getPage(1)" class="custom-select" v-model="query.pageSize">
                            <option v-for="pg in pageList" :value="pg">{{pg}}条</option>
                        </select>
                        <div class="input-group-append">
                            <span class="input-group-text">记录</span>
                        </div>
                    </div>
                </li>
                <li class="page-item pagination-sm"><a class="page-link" href="xxx"
                        @click.prevent="getPage(page.first)">首页</a></li>
                <li class="page-item pagination-sm"><a class="page-link" href="#"
                        @click.prevent="getPage(page.pre)">上页</a></li>
                <li class="page-item pagination-sm"><a class="page-link" href="#"
                        @click.prevent="getPage(page.next)">下页</a></li>
                <li class="page-item pagination-sm"><a class="page-link" href="#"
                        @click.prevent="getPage(page.last)">末页</a></li>

                <li>
                    <div class="input-group input-group-sm">

                        <div class="input-group-prepend">
                            <span class="input-group-text">当前第</span>
                        </div>

                        <input class="form-control" type="text" @change="getPage(query.pageNum)" v-model="query.pageNum"
                            style="width:50px;text-align:center;" />

                        <div class="input-group-append">
                            <span class="input-group-text">页</span>
                        </div>

                    </div>
                </li>

            </ul>
            <div style="font-size:14px;display:flex;flex-direction: column;justify-content: center;">
                当前第{{page.pageNum}}页{{page.currSize}}条记录，共{{page.pgTotal}}页{{page.total}}条记录
            </div>
        </nav>


        <!--新增窗口-->
        <div id="win-add" style="padding:15px;display:none;">
            <form>
                <div class="form-group">
                    <label>客户名称</label>
                    <input type="text" class="form-control" v-model="addObj.cus_name">
                </div>
                <div class="form-group">
                    <label>客户备注</label>
                    <textarea type="text" class="form-control" style="height:100px;"
                        v-model="addObj.cus_remark"></textarea>
                </div>

                <button @click="execAdd" type="button" class="btn btn-primary">提交</button>

            </form>
        </div>

        <!--修改窗口-->
        <div id="win-upd" style="padding:15px;display:none;">
            <form>
                <div class="form-group">
                    <label>客户名称</label>
                    <input type="text" class="form-control" v-model="updObj.cus_name">
                </div>
                <div class="form-group">
                    <label>客户备注</label>
                    <textarea type="text" class="form-control" style="height:100px;"
                        v-model="updObj.cus_remark"></textarea>
                </div>

                <button @click="execUpd" type="button" class="btn btn-primary">提交</button>

            </form>
        </div>

    </div>

</body>




<script src="../../js/vue.min.js"></script>
<script src="../../js/axios.min.js"></script>

<script src="../../js/jquery-3.3.1.slim.min.js"></script>
<script src="../../js/popper.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../layer/layer.js"></script>

<script src="../../js/my.js"></script>


<script type="text/javascript">


    const getPage = function (pageNum) {//获取本页数据
        this.query.pageNum = pageNum;
        this.$myGet('/info/customer/cus', { params: this.query })
            .then((data) => {
                this.ids = [];//清空多选框选中状态
                this.page = data;
                this.query = {
                    pageNum: this.page.pageNum,//请求页码
                    pageSize: this.page.pageSize,//每页最大记录数
                    cus_status: '-1'
                }
            });
    };

    //打开新增窗口
    const openAddWin = function () {
        this.addObj = {};//清空数据
        this.addIdx = layer.open({
            type: 1,
            content: $('#win-add'),
            area: ['800px', '600px']
        });
    };

    //执行增加
    const execAdd = function () {
        this.$myPost('/info/customer/cus', this.addObj)
            .then((result) => {//成功后需要执行的代码
                this.getPage(this.page.last + 1);
                layer.close(this.addIdx);
            });
    };

    //打开修改窗口
    const openUpdWin = function (item) {
        this.updObj = { ...item };//ES6新特性：将一个对象的属性值赋予另外一个对象
        this.updIdx = layer.open({
            type: 1,
            content: $('#win-upd'),
            area: ['800px', '600px']
        });
    };

    //执行修改
    const execUpd = function () {
        this.$myPut('/info/customer/cus', this.updObj)
            .then((result) => {//成功后需要执行的代码
                this.getPage(this.page.pageNum);
                layer.close(this.updIdx);
            });
    }

    //执行删除
    const execDel = function (id) {
        //`/info/customer/cus/${id} es6新特性：模版字符串
        this.$myDelete(`/info/customer/cus/${id}`, { title: '提示', message: '您确实要删除该条数据吗？' })
            .then((result) => {//成功后需要执行的代码
                this.getPage(this.page.pageNum);
            });
    };


    //执行多删除
    const execMultiDel = function () {
/* 
        if (this.ids.length == 0) {
            layer.msg('您没有选择任何数据！', {
                icon: 5,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
            return;
        }

 */
        this.$myDelete('/info/customer/cus', { title: '提示', message: '您确实要删除选中的数据吗？', data: this.ids })
            .then((result) => {//成功后需要执行的代码
                this.getPage(this.page.pageNum);
            });
    };


    let vm = new Vue({
        el: '#app',
        data: {//数据
            page: {},//当前页对象
            statusList: [
                { code: '00', name: '未确定' },
                { code: '22', name: '已确定' },
                { code: '55', name: '已启用' },
                { code: '77', name: '已禁用' }
            ],

            pageList: [2, 3, 5, 8, 10, 20, 30],

            query: {
                pageNum: 1,//请求页码
                pageSize: 5,//每页最大记录数
                cus_status: '-1'
            },//查询数据

            addObj: {},//新增数据
            addIdx: null,

            updObj: {},//修改数据
            updIdx: null,

            ids: [],//绑定多选框
        },
        methods: {//方法
            getPage,//获取本页数据
            openAddWin,//打开新增窗口            
            execAdd,//执行增加

            openUpdWin,//打开修改窗口
            execUpd,//执行修改

            execDel,//执行删除

            execMultiDel,//执行多删除

        },
        mounted() {//页面渲染完之后立即执行的代码
            //通过ajax请求服务器，获取数据
            this.getPage(1);
        }

    });

</script>


</html>